<template>
  <div class="contail">
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
      <div class="fengniao-tip"
           v-if="tip">暂时没有数据</div>
      <van-list v-model=" loading "
                :finished="finished "
                @load="onLoad ">
        <div class="list">
          <div class="item"
               v-for="(item,index) in list"
               :key="index"
               @click="goPage('/notice/detail','',{id:item.id})">
            <p class="title"
               v-text="item.title"></p>
            <div class="img">
              <img v-lazy="item.picTop?`${item.picTop.includes('://')?item.picTop:`${imagesUrl}/${item.picTop}`}`:''">
            </div>
            <ul class="detail">
              <span>{{item.createDate}}</span>
            </ul>
          </div>
        </div>
      </van-list>

    </van-pull-refresh>

  </div>
</template>

<script>

import baseCommon from '@/mixins/common.js';
import { getNews } from '@/api/common';
import { validatenull } from '@/util/validate';
import { mapGetters } from 'vuex';

export default {
  name: 'community',
  mixins: [baseCommon()],
  data() {
    return {
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      tip: false,
      page: {
        total: 0,
        type: 0,
        communityId: undefined,
        page: 1,
        limit: 10,
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'community']),
  },
  created() {
    this.page.communityId = this.community.communityId;
  },
  mounted() { },
  methods: {
    onRefresh() {
      this.tip = false;
      this.page.page = 1;
      getNews(this.page).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.list = data.records;
        this.isLoading = false;
        this.finished = false;
        this.onLoad();
      });
    },
    onLoad() {
      this.tip = false;
      getNews(this.page).then((res) => {
        this.setPage(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  .item {
    margin-bottom: 10px;
    padding: 16px 21px 24px 12px;
    box-sizing: border-box;
    background-color: #fff;
    .title {
      margin-bottom: 11px;
      color: #333;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 30px;
      line-height: 30px;
    }
    .img {
      margin-bottom: 14px;
      width: 100%;
      img {
        width: 100%;
        height: 180px;
      }
    }
    .detail {
      color: #bcbcbc;
      span {
        margin-right: 20px;
        font-size: 10px;
      }
    }
    .menu {
      position: relative;
      height: 14px;
      .btn {
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;
        color: #666;
        font-size: 14px;
        i {
          margin-top: 1px;
          margin-left: 5px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>

